<template>
  <div class="sortItem">
      <div>
        <div class="tit">全部</div>
        <span class="sortitem" v-for="(item,index) in arr" v-bind:key="index" v-on:click="shareIndex(index)">{{item}}
          <i v-if="index!==arr.length-1">|</i>
        </span>
      </div>
  </div>
</template>

<script>
export default {
  name: "SortItem",
  props:{
    arr:{

    }
  },
  setup(props,context){
    function shareIndex(index){
      context.emit('showIndex',index)
    }

    return {
      shareIndex
    }
  }
}
</script>

<style scoped>
.tit{
  display: inline-block;
  font-size: 27px;
  line-height: 27px;
  margin-top: 35px;
  margin-bottom: 37px;
  color: #dff4ff;
}
.sortitem{
  color: #fbe8e1;
  font-size: 17px;
  padding-left: 18px;
  padding-right: 8px;
}
.sortitem i{
  padding-left:12px;
}
</style>